<script setup lang="ts">
import type { Good } from "@/types/homeTypes/homeTypes.ts";

interface Props {
   good: Good;
}

defineProps<Props>();
</script>

<template>
   <RouterLink :to="{name:'detail',params:{id:good.id}}" class='good-item'>
      <img v-lazy="good.picture">
      <p class="name ellipsis">{{good.name}}</p>
      <p class="desc ellipsis">{{good.desc}}</p>
      <p class="price">&yen;{{ good.price}}</p>
   </RouterLink>
</template>

<style scoped lang="less">
.good-item {
   display: block;
   width: 220px;
   padding: 20px 30px;
   text-align: center;
   .hoverShadow();

   img {
      width: 160px;
      height: 160px;
   }

   p {
      padding-top: 10px;
   }

   .name {
      font-size: 16px;
   }

   .desc {
      color: #999;
      height: 29px;
   }

   .price {
      color: @priceColor;
      font-size: 20px;
   }

}
</style>
